<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	#box{
	width: 100px;
	height: 100px;
	background:aqua;
		margin: 0 auto;
		text-align: center;
		
		/*transition-delay: 1s;*/
	/*	transition-duration: 2s;*/
		
	}
	</style>
</head>

<body>
<div id="box" onClick="sw()"></div>
<script>
	var i=0;
	function sw(){
		i++;
	var	box=document.getElementById("box");
		if(i%2==0){
			box.style.width="400px";
			box.style.height="400px";
			box.style.background="red";
			box.innerHTML="大";
			box.style.fontSize="46px;"
		} else{
				box.style.width="100px";
			box.style.height="100px";
			box.style.background="blue";
			box.innerHTML="小";
			box.style.transition="all 1s linear 0s";
			box.style.fontSize="16px;"
		}
	}
	</script>
</body>
</html>
